<template>
    <div class="mainDiv">
        <div class="modalDiv">
            <Input v-model="modalData" placeholder="模板，占位符用英文问号(?)代替" style="width: 70%"/>
            <Input v-model="splitFlag" placeholder="分隔符，默认tab" style="width: 9%"/>
            <span style="color: #FFF">分隔符，默认<Button ghost size="small" title="点击恢复默认" @click="defaultSplitFlag()">tab</Button></span>
        </div>
        <div class="contentDiv">
            <textarea v-model="originData" placeholder="源数据" class="content" cols="30" rows="10"></textarea>
        </div>
        <div class="buttonDiv">
            <Button ghost @click="clearContent()">清空</Button>
            &nbsp;&nbsp;&nbsp;
            <Button ghost @click="confirmReplace()">替换</Button>
        </div>
        <div class="contentDiv">
            <textarea v-model="replaceData" placeholder="处理后的数据" class="content" cols="30" rows="10"></textarea>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'BatchReplace',
    components: {},
    data () {
      return {
        modalData: '',
        originData: '',
        replaceData: '',
        splitFlag: '\t'
      }
    },
    created () {
      console.info('初始化')
    },
    methods: {
      clearContent () {
        this.modalData = ''
        this.originData = ''
        this.replaceData = ''
      },
      confirmReplace () {
        console.info('替换')
        if (!this.modalData) {
          this.$Message.warning('请输入模板数据')
          return
        }
        if (!this.originData) {
          this.$Message.warning('请输入源数据')
          return
        }
        let lines = this.originData.split('\n')
        let resultData = []
        console.info('lines:', lines.length)
        for (let i = 0; i < lines.length; i++) {
          let line = lines[i]
          let rowArray = line.split(this.splitFlag)
          let oneResult = this.modalData
          for (let j = 0; j < rowArray.length; j++) {
            oneResult = oneResult.replace('?', rowArray[j])
          }
          resultData.push(oneResult)
        }
        console.info('resultData', resultData)
        this.replaceData = ''
        for (let i = 0; i < resultData.length; i++) {
          this.replaceData = this.replaceData += resultData[i] + '\n'
        }
      },
      defaultSplitFlag () {
        this.splitFlag = '\t'
      }
    }
  }
</script>

<style scoped>

    .mainDiv {
        width: 100%;
        height: 532px;
        overflow: auto;
    }
    .modalDiv {
        width: 90%;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
    }
    .contentDiv {
        width: 90%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        height: 300px;
        overflow: auto;
    }

    .content {
        width: 100%;
        height: 97%;
    }

    .buttonDiv {
        text-align: center;
    }
</style>
